/**
 * 功能：转账
 * 入口：转入公司账户
 * 
 */
 import React from 'react'
 import PureRenderMixin from 'react-addons-pure-render-mixin'
import { Link,hashHistory,browserHistory } from 'react-router';
 import {DanluJsBridge,filter,logger,http} from 'common/index'
 import {Switch,Alert,PullLoad,Header,FormInput} from 'components/index'
 import {BankCard} from './subpage/index'

 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import * as walletInfoActionsFromOtherFile from '../../store/actions/walletinfo' 

class autoDeposit extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
        this.state = {
            setPasswd : false,
            showCheckPasswd : false,
            isTransfered : false,
            choosedCompanyCard : '', //选中的对公卡号
            choosedPersonCard : '',  //选中的对私卡号
            autoDepositSwitch:true,
            bindCards : props.walletinfo.bindCards,
            companyCards : [], //对公卡
            personCards : [], //对私卡
        }

        this.hideBindCards = this.hideBindCards.bind(this);
        this.showBindCards = this.showBindCards.bind(this);
    }
    componentWillMount () { 
        var _this = this;
        DanluJsBridge.callHandler('setTitle', {
            title: '钱包自动提现',
            color: '#ff444444',
        })
        DanluJsBridge.callHandler("setBackBtnColor", {
          color: '#ff444444'
        });
        DanluJsBridge.callHandler('setTitleBarColor', {
            color: ['#fff9f9f9','#fff9f9f9']
        }, function() {
            alert(123)
        })
        this.setState({
            autoDepositSwitch : this.props.walletinfo.autoDeposit
        })
        if (this.state.bindCards && this.state.bindCards.length) {
            DanluJsBridge.callHandler('setOptionMenu', {menus:[{
                    title: '保存',
                    color: '#ff444444',
                }]}, function(response) {
            })
            DanluJsBridge.registerHandler('handlerNativeMessage',function(e,callBack){
                if (e.event == 'optionMenuClickEvent') {
                    _this.saveDeposit();
                }
                callBack(1);
            })
            
        }else{
            this.setState({
                autoDepositSwitch : false
            })
        }
        if (this.props.walletinfo.autoDeposit == true) {
            this.showBindCards(this.props.walletinfo.publicCardId,this.props.walletinfo.privateCardId);
        }

    }
    componentWillUnmount(){
        DanluJsBridge.callHandler('setOptionMenu', {menus:[{
                title: '',
                color: '#ff444444',
            }]}, function(response) {
        })
    }
    saveDeposit(){
        var autoDepositSwitch = this.state.autoDepositSwitch == true ? '1' : '0'
        var reqData = {
            "userId":this.props.walletinfo.user.userId,
            "companyId":this.props.walletinfo.user.companyId,
            "autoSwitch":autoDepositSwitch,
            "publicCardId":this.state.choosedCompanyCard,
            "privateCardId":this.state.choosedPersonCard
        }
        http.post('/dlpcweb/dlpc/pc/V1/wallet/autoWithDrawConfig',reqData).then((data) =>{

            DanluJsBridge.callHandler('toast', {
              content :"设置成功", type:'success',duration :  2000
            }, function(){
                browserHistory.goBack();
            })
        })
    }
    //隐藏绑定银行卡
    hideBindCards(){
        this.setState({
            companyCards : [],
            personCards : []
        })
        this.props.walletinfoActions.walletInfoUpdate({
            title: "关闭自动提现开关",
            autoDeposit :false
        })
    }
    //展示绑定银行卡
    showBindCards(publicCardId,privateCardId){
        var bindCards = this.props.walletinfo.bindCards || []
        var companyCards = []
        var personCards = []
        bindCards = bindCards.map( item => { item.cardType ==3 ? companyCards.push(item) : personCards.push(item) })
        if (!publicCardId) {
            publicCardId = companyCards && companyCards.length>0 ? companyCards[0].userBusiId  : ''
        }

        this.setState({
            companyCards : companyCards,
            personCards : personCards,
            choosedCompanyCard : publicCardId,
            choosedPersonCard : privateCardId
        })


    }

    handleSwitchClick(value){
        if (!this.state.bindCards) {
            return false;
        }
        this.setState({
            autoDepositSwitch : value
        })

        if (value) {
            this.showBindCards();
        }else{
            this.hideBindCards();
        }

    }

    bankCardClick (card){
        if (card.cardType == '3') {
            this.setState({
                choosedCompanyCard : card.userBusiId
            })    
        }else{
            this.setState({
                choosedPersonCard : card.userBusiId
            })  
        }
        
        
    }
    render() {
        
        return (
        	<div className="AutoDeposit">
                <Header className="heaer-border"/>
                <div className="autoDepositSwitch">
                    <div className="padding10" style={{background:'white'}} >
                        <span style={{lineHeight:'0.3rem'}}>自动提现开关</span>
                        <span className="float-right">
                            <Switch value={this.state.autoDepositSwitch} disabled={!this.state.bindCards || !this.state.bindCards.length} handleClick={this.handleSwitchClick.bind(this)}/>
                        </span>
                        <div className="gray"  style={{borderTop:'1px dashed lightgray',marginTop:'0.1rem',paddingTop:'0.1rem'}}>每次提现将收取
                            <span className="wallet-color">{filter.toMoneyFormat(this.props.walletinfo.withDrawFee)}</span>
                            元服务费</div>
                    </div>
                {/*<button onClick={this.saveDeposit.bind(this)}>保存</button>*/}
                </div>
                <div style={{height:'0.97rem'}}></div>
                {
                    this.state.autoDepositSwitch ? 
                    <div className="autoDepositList">
                        <div className="padding10 card-tit" >对公账户余额提现至：{this.state.companyCards.length ? ''  :<span className="gray">暂未绑定银行卡</span>}</div> 
                        { 
                            this.state.companyCards.map( (item,index) =>{
                                return <BankCard card={item} key={index} choosed={item.userBusiId == this.state.choosedCompanyCard} showCheckBox={true} onClick={this.bankCardClick.bind(this)}/>
                            } ) 
                        }

                        <div className="padding10  card-tit">对私账户余额提现至：{this.state.personCards.length ? ''  :<span className="gray">暂未绑定银行卡</span>}</div> 
                        { 
                            this.state.personCards.map( (item,index) =>{
                                return <BankCard card={item} key={index} choosed={item.userBusiId == this.state.choosedPersonCard} showCheckBox={true} onClick={this.bankCardClick.bind(this)}/>
                            } ) 
                        }
                    </div> :  <div >
                        {
                            this.state.bindCards && this.state.bindCards.length ? <div className="padding10 gray">打开自动提现开关后可选择提现银行账户</div>: <div className="padding10">暂无可选的提现银行账户</div>
                        }
                        
                        </div>
                }

            
            </div>
            )
    }
}


// -------------------redux react 绑定--------------------

function mapStateToProps(state) {
    return {
        walletinfo: state.walletinfo
    }
}

function mapDispatchToProps(dispatch) {
    return {
        walletinfoActions: bindActionCreators(walletInfoActionsFromOtherFile, dispatch)
    }
}
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(autoDeposit)
